<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>艺术上海 - ${data.data.name!''}作品集</title>
    <meta name="keywords" content="${data.data.name!''}作品集" />
    <meta name="description" content="${data.data.detail!''}作品集" />
    <meta name="author" content="" />

    <!-- ====================== Mobile Specific Meta ====================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <!-- ====================== Style CSS + Google Fonts =================== -->
    <link rel="stylesheet" href="/static/resume/css/custom-scrollbar.css" />
    <link rel="stylesheet" href="/static/resume/css/bootstrap.css" />
    <link rel="stylesheet" href="/static/resume/css/icomoon.css" />
    <link rel="stylesheet" href="/static/resume/css/owl.css" />
    <link rel="stylesheet" href="/static/resume/css/jquery.fullPage.css" />
    <link rel="stylesheet" href="/static/resume/css/screen.css" />
    <link href="/static/css/font/font-awesome.min.css" rel="stylesheet" />
    <link href="/static/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="/static/js/owl/owl.carousel.css" rel="stylesheet" />
    <link href="/static/js/owl/owl.theme.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="/static/img/icon.png"/>
</head>

<body>
<!-- ========================= START HEADER ======================== -->
<header class="header">
    <!-- <i class="nav-toggle fa fa-bars"></i> -->
    <i class="nav-toggle fa fa-arrow-circle-left" id="back"></i>
    <a class="brand" href="/">
        <img src="/static/img/header/logo.png" style="width: 120px" alt="logo" />
    </a>
</header>

<!-- ========================= START NAVIGATION ======================== -->


<!-- ========================= START SITE PRELOADER ======================== -->
<div class="preloader">
    <div class="preloader-wrapper">
        <img src="/static/img/logo.gif" style="width: 220px" alt="resume logo" />
    </div>
</div>

<!-- ========================= START SLIDE PRELOADER ======================== -->
<div class="slide-preloader">
    <div class="slide-preloader-wrapper">
        <span></span>
        <span></span>
        <br />
        <span></span>
        <span></span>
    </div>
</div>

<!-- ========================= START MAIN CONTENT ======================== -->
<div id="fullpage" class="content">
    <!-- ========================= START MAIN SECTION ======================== -->
    <section class="section" data-anchor="main">
        <div class="section-content" style="background-color:#e05c46;">
            <img class="mobile-brand" alt="responsive logo" src="/static/img/header/logo.png" />
            <div class="container">
                <div class="main-info">
                    <div class="row">
                        <div class="col-md-9">
                            <div class="short-info-wrapper">
                                <div class="image">
                                    <img src="${data.data.headImg!''}"
                                         alt="${data.data.name!''  }" />
                                </div>
                                <div class="text">
                                    <h2><span>${data.data.name!''}</span></h2>
                                    <p>${data.data.bizValue5!''}</p>
                                    <p class="detail">${data.data.detail!''}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ======= Start scroll down toggle ======= -->
        <div class="scroll-toggle down">
            <i class="fa fa-angle-down"></i>
            <span>向下滚动</span>
        </div>
    </section>

    <!-- ========================= START ABOUT SECTION ======================== -->
    <section class="section" data-anchor="about">

        <div class="section-content"
             style="background-image:url(${data.data.imgs!''});background-color:#eee; background-size: contain">
            <img class="mobile-brand" alt="responsive logo" src="/static/img/header/logo.png" />
            <div style="width: 50%; height: 100%; float: right; background:#fff">
                <div class="row row-fit-20">
                    <div class="col-md-12">
                        <div class="timeline-box" style="font-size: 16px; line-height: 1.8">
                        ${data.data.bizValue2}
                        </div>
<#--                        <div class="timeline-box" style="height: 100%; overflow: hidden; overflow-y: scroll">-->

<#--                            <ul id="timeline">-->

<#--                            </ul>-->

<#--                        </div>-->
                    </div>

                </div>
            </div>
        </div>

        <!-- ======= Start scroll down toggle ======= -->
        <div class="scroll-toggle down">
            <i class="fa fa-angle-down"></i>
            <span>向下滚动</span>
        </div>
    </section>

    <!-- ========================= START PORTFOLIO SECTION ======================== -->

    <section class="section" >
        <div class="section-content" style="background: #f3f3f3;">
            <!-- ================ Start Portfolio Slide ================ -->
            <div class="slide porfolio-slide" data-anchor="portfolio-container">
                <img class="mobile-brand" alt="responsive logo" src="/static/img/header/logo.png" />
            </div>

            <div class="container" style="width:1440px; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center" >
                <div  class="owl-carousel" id="owl-demo">
                    <#list data.data.representativeWork2 as item>
                        <a class="item" href="/works/detail?productNo=${item.productNo}" target="_blank">
                            <div class="item-box">
                                <div class="item-box-img">
                                    <img src="${item.image}" alt="">
                                </div>
                                <div class="item-box-info">
                                    <h3>${item.name}</h3>
                                    <p>${item.bizValue18?if_exists}x${item.bizValue6?if_exists}
                                     <#if item.bizValue5 ?? && item.bizValue5 != ''>
                                       x${item.bizValue5}
                                        <#else>
                                       </#if>
                                     cm</p>
                                      <#if item.price != 0 >
                                    <p class="price">¥${item.price?if_exists} </p>
                                       </#if>

                                </div>
                            </div>
                        </a>
                    </#list>
                </div>
            </div>
        </div>
    </section>
    <!-- ========================= START CONTACT SECTION ======================== -->
</div>

<style>
    .item-box-img {
        height: 240px;
        object-fit: cover;
        background: #fff;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .item-box-img img {
        width: 80%;
    }
</style>
<!-- ========================= START FP NAVIGATION ======================== -->
<div id="fp-nav">
    <ul>
        <li data-menuanchor="main" class="active">
            <a href="#main">
                <span></span>
            </a>
            <div class="fp-tooltip">Main</div>
        </li>
        <li data-menuanchor="about">
            <a href="#about">
                <span></span>
            </a>
            <div class="fp-tooltip">About</div>
        </li>
        <#list data.data.representativeWork as item>
        <li data-menuanchor="portfolio-${item.productNo}">
            <a href="#portfolio-${item.productNo}">
                <span></span>
            </a>
            <div class="fp-tooltip">${item.name}</div>
        </li>
        </#list>

    </ul>
</div>

<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="https://lib.sinaapp.com/js/jquery-ui/1.11.4/jquery-ui.min.js"></script>
<script src="/static/resume/js/jquery.fullPage.min.js" type="text/javascript"></script>
<script src="/static/resume/js/jquery.easings.min.js" type="text/javascript"></script>
<script src="/static/resume/js/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="/static/resume/js/placeholder.js" type="text/javascript"></script>
<script src="/static/resume/js/bootstrap.js" type="text/javascript"></script>
<script src="/static/resume/js/imagesloaded.pkgd.min.js" type="text/javascript"></script>
<script src="/static/resume/js/customScrollbar.js" type="text/javascript"></script>
<script src="/static/resume/js/isotope.pkgd.min.js" type="text/javascript"></script>
<script src="/static/resume/js/owl.carousel.min.js" type="text/javascript"></script>
<script src="/static/resume/js/plugins.js" type="text/javascript"></script>
<script src="/static/resume/js/options.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<script type="text/javascript" src="/static/js/owl/owl.carousel.js"></script>
<![endif]-->
<script>
    var timeLine = ${data.data.bizValue1}

    $(function() {
        $("#back").click(function () {
            window.location.href = "https://www.artshanghaifair.com"
        })
        for(var i=0; i<timeLine.length; i++){
            var html = '<li> <div class="row"><div class="col-sm-3"><div class="date-wrapper"> <p class="date">'+timeLine[i].year+'</p></div> </div><div class="col-sm-9"><div class="details-wrapper"> <i class="timeline-circle"></i><h3><a href="#">'+timeLine[i].title+'</a></h3> <p>'+timeLine[i].des+'</p> </div> </div> </div> </li>'
            $('#timeline').append(html)
        }

        $('#owl-demo').owlCarousel({
            // navigation: true,
            // navigationText: ["上一个","下一个"]
        });
    })
</script>
<style>
    a.item{
        text-decoration: none;
    }
    .item-box{
        margin: 0px 20px;
    }
    .item-box-info{
        font-weight: 400;
        color: #333;
        margin-top: 10px;
    }
    .item-box-info h3{
        font-weight: 400;
    }
    .item-box-info p{
        font-weight: 400;
        font-size: 14px;
    }
    .detail{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp:5;
    }
</style>
</body>

</html>